<template>
	<doc-main>
		<div class="col-lg-12">
			<h4>BottomBar 底部Bar</h4>
			<h5>概述</h5>
			<p>适配手机模式的底部样式</p>
			<h5>如何使用:</h5>
			<p>使用 <code>BottomBar</code> 组件，指定图标对应的menus属性，示例代码：</p>
			<h5>Code</h5>
			<code-parsing language="html js hljs javascript">{{code}}</code-parsing>
			<h5>效果:</h5>
			<div class="col-lg-12">
				<bottom-bar :menus="menus" style="position: relative; max-width: 400px"></bottom-bar>
			</div>
		</div>
	</doc-main>
</template>

<script>
	import DocMain from '../layout/DocMain.vue';
	import BottomBar from '../../../js/components/bar/BottomBar';
	import CodeParsing from '../layout/CodeParsing';
	import {bottomBar} from '../../html/data';
	export default {
		data () {
			return {
				menus: [
					{link: '/doc/bottom/bar', active: 'active', icon: 'fa-home', label: '首页'},
					{link: '/doc/bottom/ba3', active: 'active', icon: 'fa-th-large', label: '分类'},
					{
						link: '/doc/bottom/ba3',
						active: 'active',
						label: '天生会玩',
						img: 'https://mcache.ifanr.cn/static/dongguan/dist/images/6fc887dc.png'
					},
					{link: '/doc/bottom/ba3', active: 'active', icon: 'fa-shopping-cart', label: '购物车'},
					{link: '/doc/bottom/ba3', active: 'active', icon: 'fa-user', label: '我的'}
				],
				code: bottomBar
			};
		},
		components: {
			CodeParsing,
			BottomBar,
			DocMain
		}
	};
</script>
